<template>
  <div id="app">
    <h1>张科瑞的客户管理系统</h1>
    <el-menu class="el-menu-demo" mode="horizontal" default-active="1" background-color="#ffcc33">
      <el-menu-item index="1">
        <router-link to="/home">首页</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/List">任务管理</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/Custom">客户管理</router-link>
        </el-menu-item>
        

        
        <div class="powerName"><span class="power">{{power.powerPerson.power == 'admin'?'管理员欢迎您：':'普通员工欢迎您：'}}</span>{{power.powerPerson.name}} <a href="/login" @click="quit()">退出</a></div>
    </el-menu>
    
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      power: {
        powerPerson: JSON.parse(localStorage.getItem("name")),
      },
    };
  },
  name: "App",
  components: {},
  created() {
    console.log(this.$store);
  },
  methods:{
    quit(){
      localStorage.removeItem('name');
    }
  }
};
</script>

<style scoped lang="less">
body {
  padding: 0;
  margin: 0;
}
#app {
  .el-menu {
    position: relative;
  }
  width: 100%;
  height: 100%;

  .powerName {
    position: absolute;
    right: 50px;
    bottom: 15px;
    z-index: 1;
  }
  position: relative;
  > ul {
    li {
      padding: 0;
      width: 72px;
      height: 60px;
      margin-left: 20px;
      text-align: center;
      a {
        width: 100%;
        height: 100%;
        display: block;
        font-size: 16px;
        text-decoration: none;
      }
    }
  }
  > h1 {
    font-size: 16px;
    position: absolute;
    height: 60px;
    width: 200px;
    left: 0;
    top: 0px;
    z-index: 1;
    line-height: 60px;
  }
}
.el-menu-demo {
  padding-left: 200px;
}
</style>
